<template>
	<view class="page">
		<u-navbar :isBack="true" title="推广二维码" title-color="#101010" 
		:background="{background: '#fff'}" :borderBottom="false"></u-navbar>
		
		<!-- <image src="@/static/my/bjtz.png" mode="widthFix" style="width: 40rpx;position: absolute;top: 88rpx;left: 32rpx;"
		@click="reduceGo"></image> -->
		
		<view style="padding: 0rpx 60rpx;margin-top: 140rpx;">
			<view style="height: 970rpx;background-size: 100% 100%;text-align:center;" 
			:style="{backgroundImage:'url(' + nrImage + ')'}">
				<image :src="userinfosData.avatar" mode="aspectFill" 
				style="width: 140rpx;margin-top: 10rpx;height: 140rpx;border-radius: 50%;"></image>
				<view style="color: #75441B;font-size: 32rpx;margin-top: 16rpx;">{{userinfosData.name}}</view>
				
				<view style="padding: 24rpx;">
					<view style="background: #fff;border-radius: 16rpx;padding: 60rpx 100rpx 14rpx 100rpx;">
						<view style="padding: 24rpx 32rpx;background-size: 100% 100%;"
						:style="{backgroundImage:'url(' + maImage + ')'}">
							<image :src="qrcodeImg" mode="widthFix" style="width: 320rpx;"></image>
						</view>
						<view style="color: #999999;font-size: 28rpx;margin-top: 40rpx;">长按识别二维码</view>
					</view>
				</view>
				
				<view style="display: flex;justify-content: space-between;">
					<view style="padding: 0 24rpx 24rpx 24rpx;font-size: 32rpx;">
						<view style="margin-top: 0rpx;padding: 24rpx;color: #fff;
						border-radius: 16rpx;background: #50A5F4;" @click="downloadFileimg">
							保存二维码
						</view>
					</view>
					<view style="padding: 0 24rpx 24rpx 24rpx;font-size: 32rpx;">
						<!-- <view style="margin-top: 0rpx;padding: 24rpx;color: #fff;
						border-radius: 16rpx;background: #50A5F4;" @click="downloadFileimg">
							分享好友
						</view> -->
						<button open-type="share" style="width: 100%;background: none;color: inherit;border: none;
						padding: 0;margin: 0;font: inherit;cursor: pointer;
						display: flex;align-items: center;
						background: #50A5F4;color: #fff;padding: 24rpx;" 
						@click.stop="">
							分享好友
						</button>
					</view>
				</view>
				
				<view style="font-size: 32rpx;color: #50A5F4;" @click="jumpTo('/pages/my/myPromotion')">
					查看我的推广
				</view>
			</view>
			
		</view>
		
	
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import appurl_config from 'utils/config.js'
	import {request} from 'utils/request.js'
	import Vue from 'vue'
	var moment = require('moment');
	export default {
		data() {
			return {
				nrImage: 'https://jdrm.smomotbo.com/my/nrbg.png',
				maImage: 'https://jdrm.smomotbo.com/my/mbg.png',
				isLogin: false,
				
				qrcodeImg: '',
				userinfosData: {}
			}
		},
		onLoad() {
			request.postWithToken({
				url: '/qrcode/generateQrcode',
				data: {}
			}).then(res=>{
				console.log('返回用户信息：', res);
				this.qrcodeImg = res.data.htmlQrcode;
				this.userinfosData = res.data.userinfosData;
			});
			uni.hideShareMenu();
		},
		onShareAppMessage: function(e) { // 分享到微信
			console.log(e);
			if(e.from != "button"){
				return;
			}
			let user_id = this.userinfosData.user_id;// 会员卡
			let title = '九度人脉';// 商家名称
			// 更多参数配置，参考文档
			return {
				title: '您的好友邀请您一起参与',
				path: '/pages/login/login?user_id=' + user_id + '&title=' + title,
				// imageUrl: doorhead_img
			}
		},
		methods: {
			reduceGo(){
				uni.navigateBack();
			},
			jumpTo(path){
				uni.navigateTo({
					url: path
				})
			},
			toDetail(item){
				Vue.prototype.MeetInfo = item
				uni.navigateTo({
					url:'detail'
				})
			},
			
			// 保存图片
			downloadFileimg(){
				// 假设你已经有一个图片url
				let imageUrl = this.qrcodeImg;
				 
				// 下载图片
				uni.downloadFile({
				    url: imageUrl,
				    success: downloadResult => {
				        if (downloadResult.statusCode === 200) {
				            // 获取下载后的图片临时文件路径
				            let tempFilePath = downloadResult.tempFilePath;
				            
				            // 保存图片到系统相册
				            uni.saveImageToPhotosAlbum({
				                filePath: tempFilePath,
				                success: () => {
				                    uni.showToast({
				                        title: '图片保存成功'
				                    });
				                },
				                fail: error => {
				                    console.log('保存图片失败：', error);
				                    uni.showModal({
				                        content: '保存图片失败，请检查权限',
				                        showCancel: false
				                    });
				                }
				            });
				        } else {
				            // 处理下载失败
				            console.log('下载图片失败：', downloadResult);
				        }
				    },
				    fail: error => {
				        console.log('下载图片失败：', error);
				    }
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7 !important;
	}
</style>
<style lang="scss" scoped>
	.page{
		background-size: 100% 100%;
	}
	.top-box{
		background-size: 100% 100%;
	}
	/* 去除 button 的默认边框样式 */
	button::after {
		border: none;
	}
</style>
